<template>
    <div class="rule-content" id="limit">
        <!-- 课程选择左侧列表 -->
        <ul class="course-list" v-loading="listLoading">
            <li v-for="item  in courseOption" @click="changeCours(item)" :class="course==item.id?'active':''">{{item.name}}</li>
        </ul> 
        <!-- 表格内容大区域 -->
        <div class="base-rule-content baseRuleContent">
            <!-- 总表 -->
            <el-table :data="baseRuleInfo" class="base-rule-table table-hover" v-loading="tableLoading" height="485">
                <el-table-column prop="courseName" label="课程" width="80" fixed></el-table-column>
                <el-table-column prop="teacherName" label="教师" width="100" fixed></el-table-column>
                <el-table-column prop="weekType" label="周任课分布" width="180" :render-header='renderHeader'>
                    <template slot-scope="scope">
                        <el-radio-group v-model="scope.row.weekType" @change="saveSingleRuele($event, scope.row, scope.$index)">
                            <el-radio label="1">分散</el-radio>
                            <el-radio label="2">集中</el-radio>
                        </el-radio-group>
                    </template>
                </el-table-column>
                <el-table-column prop="dayType" label="日任课分布" width="180" :render-header='renderHeader'>
                    <template slot-scope="scope">
                        <el-radio-group v-model="scope.row.dayType" @change="saveSingleRuele($event, scope.row, scope.$index)">
                            <el-radio label="1">分散</el-radio>
                            <el-radio label="2">集中</el-radio>
                        </el-radio-group>
                    </template>
                </el-table-column>
                <el-table-column prop="dayConType" label="连上最长节数" width="200" :render-header='renderHeader'>
                    <template slot-scope="scope">
                        <el-radio-group v-model="scope.row.dayConType" @change="saveSingleRuele($event, scope.row, scope.$index)">
                            <el-radio label="1">最长3节</el-radio>
                            <el-radio label="2">最长4节</el-radio>
                        </el-radio-group>
                    </template>
                </el-table-column>
                <el-table-column prop="teachingPlanType" label="教案平齐" width="180" :render-header='renderHeader'>
                    <template slot-scope="scope">
                        <el-checkbox label="1" v-model="scope.row.teachingPlanType" @change="saveSingleRuele($event, scope.row, scope.$index)">满足教案平齐</el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="教师互斥" width="250" :render-header='renderHeader'>
                    <template slot-scope="scope">
                        <div v-if="!scope.row.showHc">
                            <el-autocomplete
                              :inx="scope.row.teacherId"
                              placeholder="请输入教师名称"
                              size="small"
                              class="hcInput"
                              v-model.sync="scope.row.hcStr"
                              :fetch-suggestions="searchTeacher"
                              :trigger-on-focus="false"
                              @select="handleSelect(scope.$index)">
                              <template slot-scope="props">
                                <span>{{props.item.value}}</span>
                              </template>
                            </el-autocomplete>
                            <el-button type="text" @click="saveHc(scope.row)">保存</el-button>
                        </div>
                        <div v-if="scope.row.showHc">
                            <span style="margin-right:10px;width:120px;display:inline-block;">{{scope.row.hcStr}}</span>
                            <el-button type="text" @click="modifyHc(scope.$index)" v-model="scope.row.showHc">修改</el-button>
                            <el-button type="text" @click="deleteHc(scope.row)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import utils from '../../../assets/js/urlConfig.js';
    export default {
        data() {
            return {
                // 当前课程ID
                course: '',
                // 课程列表
                courseOption: [],
                // 表格加载显示
                tableLoading: true,
                listLoading: true,
                // 任务ID
                taskId: sessionStorage.getItem('taskId') || '91',
                // 基础规则信息
                baseRuleInfo: [],
                // 教师映射
                yinshe: {},
                timer: false,
                delayTime: 1000
            }
        },
        mounted() {
            this.getCourseOption();
            this.init();
            this.getBaseRuleInfo();
        },
        methods: {
            // 获取课程信息
            getCourseOption() {
                this.$http.get(`${utils.UrlConfig.GetQueryCourse}&taskId=${this.taskId}`)
                    .then(res => {
                        this.$set(this.$data, 'courseOption', res.data.bizData);
                        this.courseOption.unshift({ name: "全部课程", id: '' })
                        this.listLoading = false;
                    }).catch(error => {
                        this.$message.error(error);
                    })
            },
            // 模板渲染表头结构
            renderHeader(createElement, { column, $index }){
                var delayTime = 1000;
                switch($index){
                    case 2:
                        return  <div>
                                    <span>周任课分布</span>
                                    <el-tooltip placement='top' open-delay={500}>
                                        <div slot="content">
                                            <b>周任课分布：</b><br/>分散表示老师任课分散到周内每一天，<br/>集中表示老师集中在某几天内上课。<br/>默认分散，保证老师每天都上课。</div>
                                        <span class="question">?</span>
                                    </el-tooltip>
                                </div>;
                        break;
                    case 3:
                        return  <div>
                                    <span>日任课分布</span>
                                    <el-tooltip placement='top' open-delay={500}>
                                        <div slot="content">
                                            <b>日任课分布：</b><br/>分散表示老师任课分散到一天内各时间段，<br/>集中表示老师集中在某几个连续节次内上课。<br/>默认集中，便于老师集中时间上课
                                        </div>
                                        <span class="question">?</span>
                                    </el-tooltip>
                                </div>;
                        break; 
                    case 4:
                        return  <div>
                                    <span>连上最长节数 </span>
                                    <el-tooltip placement='top' open-delay={500}>
                                        <div slot="content">
                                            <b>连上最长节数：</b><br/>用于设置老师连续上课的最长节数，<br/>语数外老师默认最长3节，其他默认最长4节。<br/>避免老师因连续上课而过度劳累。
                                        </div>
                                        <span class="question">?</span>
                                    </el-tooltip>
                                </div>;
                        break;
                    case 5:
                        return  <div>
                                    <span>教案平齐</span>
                                    <el-tooltip placement='top' open-delay={500}>
                                        <div slot="content">
                                            <b>教案平齐：</b><br/>保证老师所带相同层次的班级课程进度一致。<br/>某老师给所带班级都教完《沁园春》后，开始教《再别康桥》。
                                        </div>
                                        <span class="question">?</span>
                                    </el-tooltip>
                                </div>;
                        break;
                    case 6:
                        return  <div>
                                    <span>教师互斥 </span>
                                    <el-tooltip placement='top-end' open-delay={500}>
                                        <div slot="content">
                                            <b>教师互斥：</b><br/>两个老师不能同时在同一时间有课。<br/>其中一位老师请假，另一位老师可为其代课。
                                        </div>
                                        <span class="question">?</span>
                                    </el-tooltip>
                                </div>;
                        break;
                }
            },
            // 获取基础规则
            getBaseRuleInfo() {
                var vm = this;
                vm.tableLoading = true;
                vm.$http.get(`${utils.UrlConfig.getBaseRuleInfo}&taskId=${vm.taskId}&courseId=${vm.course}`)
                    .then(function(res){
                        vm.tableLoading = false;
                        vm.baseRuleInfo = res.data.list;
                        vm.baseRuleInfo.forEach(function(value, index, array) {
                            array[index].weekType = value.weekType.toString();
                            array[index].dayType = value.dayType.toString();
                            array[index].dayConType = value.dayConType.toString();
                            array[index].teachingPlanType = (array[index].teachingPlanType == 1)? true : false;
                            if(array[index].repellentTeacherName){
                                array[index].hcStr = array[index].repellentTeacherName + '-' + array[index].teacherCourse + '-' + array[index].teacherGrade.slice(0,2),
                                array[index].showHc = true;
                            }else{
                                array[index].hcStr = '';
                                array[index].showHc = false;
                            }
                        });
                    })
            },
            // 保存单个教师规则
            saveSingleRuele(value, row, index) {
                if(this.timer){
                    return;
                }
                this.timer = true;
                var datas = {
                    data: {
                        courseId: row.courseId,
                        teacherId: row.teacherId,
                        weekType: Number(row.weekType),
                        dayType: Number(row.dayType),
                        dayConType: Number(row.dayConType),
                        teachingPlanType: row.teachingPlanType ? 1 : 2
                    }
                }
                this.tableLoading = true;
                this.$http({
                        method: 'POST',
                        url: utils.UrlConfig.saveBaseRuleInfo + "&taskId=" + this.taskId,
                        data: datas
                    })
                    .then(res => {
                        this.tableLoading = false;
                        if(res.data=='SUCCESS'){
                            this.$message({
                                message: '保存成功！',
                                type: 'success'
                            });
                        }
                        this.timer = false;
                    }).catch(error => {
                        console.log(error)
                    })
            },
            // 模糊搜索互斥老师
            searchTeacher(queryString, cb) {
                console.log(this);
                var resultList = [];
                this.$http.get(`${utils.UrlConfig.getTeacherInfo}&taskId=${this.taskId}&teacherName=${encodeURI(encodeURI(queryString))}`)
                    .then(res => {
                       res.data.list.forEach(function(value, index, array){  
                            resultList.push({
                                'value': value.teacherName + '-' + value.courseName + '-' + value.grade.slice(0,2),
                                'id': value.teacherId
                            })
                       })
                       cb(resultList);
                    }).catch(error => {
                        this.$message.error(error);
                    })
            },
            // 模糊搜索选中回掉
            handleSelect(index){
                var vm = this;
                var obj = vm.baseRuleInfo[index];
                if(obj.teacherId == vm.yinshe[obj.hcStr]){
                    obj.hcStr = new String();
                    vm.$set(vm.baseRuleInfo, index, obj);
                    vm.$message.error('不能与老师自己互斥');
                    return;
                }
                obj.hcStr = obj.hcStr;
                this.$set(vm.baseRuleInfo, index, obj);
            },
            // 初始化教师映射表
            init() {
                var vm = this;
                this.$http.get(`${utils.UrlConfig.getTeacherInfo}&taskId=${this.taskId}&teacherName=${encodeURI(encodeURI('-1'))}`)
                    .then(function(res){
                        var list = res.data.list;
                        list.forEach(function(value) {
                            vm.yinshe[value.teacherName + '-' + value.courseName + '-' + value.grade.slice(0,2)] = value.teacherId;
                        });
                    })
            },
            // 保存互斥老师
            saveHc(row) {
                var vm = this;
                if(row.hcStr==''){
                    this.$message.error('请选择互斥教师');
                    return;
                }
                if(!vm.yinshe[row.hcStr]){
                    this.$message.error('请选择正确的老师');
                    return;
                }
                vm.tableLoading = true;
                var datas = {
                    data: {
                        courseId: row.courseId,
                        teacherId: row.teacherId,
                        repellentTeacherId: vm.yinshe[row.hcStr]
                    }
                }
                this.$http({
                        method: 'POST',
                        url: utils.UrlConfig.saveTeacherRepellentInfo + "&taskId=" + this.taskId,
                        data: datas
                    }).then(function(res){
                        if(res.data=='SUCCESS'){
                            vm.$message({
                                message: '保存成功！',
                                type: 'success'
                            });
                            vm.baseRuleInfo = [];
                            vm.getBaseRuleInfo();
                        }
                    }).catch(function(error){
                        console.log(error);
                    })
            },
            // 删除互斥老师
            deleteHc(row) {
                var datas = {
                    data:{}
                }
                this.tableLoading = true;
                this.$http({
                        method: 'POST',
                        url: utils.UrlConfig.deleteTeacherRepellentInfo + "&taskId=" + this.taskId + '&courseId=' +  row.courseId + '&teacherId=' + row.teacherId,
                        // data: datas
                    }).then(res => {
                    if(res.data=='SUCCESS'){
                        this.$message({
                            message: '删除成功！',
                            type: 'success'
                        });
                        this.tableLoading = true;
                        this.getBaseRuleInfo();
                    }
                }).catch(error => {
                    console.log(error)
                })
            },
            // 修改互斥点击事件
            modifyHc(index) {
                var vm = this;
                var obj = vm.baseRuleInfo[index];
                obj.showHc = !obj.showHc;
                vm.$set(vm.baseRuleInfo, index, obj);
            },
            changeCours(course) {
                this.course = course.id;
                this.baseRuleInfo = [];
                this.tableLoading = true;
                this.getBaseRuleInfo();
            },
            a() {
                var vm = this;
                var obj = vm.baseRuleInfo[0];
                obj.hcStr = 'wp';
                this.$set(vm.baseRuleInfo, 0, obj);
            }
        }
    }
</script>

<style scoped>
    #limit:after{
        content: '';
        display: block;
        clear: both;
    }
    #limit>*{
        float: left;
    }
    #limit .baseRuleContent{
        /*width: 1127px; */
        width: -moz-calc(100% - 181px);
        width: -webkit-calc(100% - 181px); 
        width: -o-calc(100% - 181px);
        width: -ms-calc(100% - 181px);
        width: calc(100% - 181px);      
    }
    .course-list{
        width: 161px;
        height: 482px;
        padding: 20px 20px 20px 50px;
        margin-top: 20px;
        margin-right: 20px;
        border-right: 1px solid #E8EBF0;
        overflow-y: scroll;
    }
    .course-list li{
        font-size: 15px;
        margin: 0;
        width: 90px;
        margin-bottom: 20px;
        cursor: pointer;
        position: relative;
        transition: color 0.3s linear;
    }
    .course-list li:last-child{
        margin-bottom: 0;
    }
    .course-list li.active{
        color: #36c6d3;
    }
    .course-list li.active:after{
        display: inline-block;
        content: '';
        width: 0;
        height: 0;
        border-top: 5px solid #0000;
        border-left: 6px solid #36c6d3;
        border-bottom: 5px solid #0000;
        margin-left: 10px;
    }
    .course-list li:hover{
        color: #36c6d3;
    }
    #limit .hcInput{
        width: 150px;
        margin-right: 10px;
    }

    .el-tooltip__popper>*{
        line-height: 1.7;
    }
    .question{
        display: inline-block;
        margin-left: 5px;
        color: #36c6d3;
        cursor: pointer;
    }
    .el-button--text{
        color: #36c6d3;
    }
</style>
